import React, { useState } from "react";

let nextId = 0;
type Artist = {
  id: number;
  name: string;
};

const List = () => {
  const [name, setName] = useState("");
  const [artists, setArtists] = useState<Artist[]>([]);

  const handleClick = () => {
    setArtists([
	    {
		    id: nextId++,
		    name: name,
	    },
      ...artists,
    ]);
  };

  const handleChange = (e : React.ChangeEvent<HTMLInputElement>) => {
	  setName(e.target.value)
  }
  return (
    <>
      <input value={name} onChange={ handleChange} />
      <button onClick={handleClick} >Add</button>
      <ul>
        {artists.map(artist => (
	        <li key={ artist.id}>
		        { artist.name }
		        <button onClick={ () => {
					setArtists(
						artists.filter(a => a.id !== artist.id)
					)
				} }>Delete</button ></li >
        ))}
      </ul>
    </>
  );
};
export default List;